<template>
  <div id="app">
    <el-header height="80px">
      <div class="container">
        <nav class="nav">
          <div class="nav-left">
            <router-link to="/" class="logo">
              <img src="@/assets/logo.svg" alt="非凡影业" class="logo-img">
              <span class="logo-text">非凡影业</span>
            </router-link>
            <div class="nav-menu">
              <router-link to="/" class="nav-item" :class="{ active: $route.path === '/' }">首页</router-link>
              <router-link to="/movies" class="nav-item" :class="{ active: $route.path === '/movies' }">电影</router-link>
              <router-link to="/cinemas" class="nav-item"
                :class="{ active: $route.path === '/cinemas' }">影院</router-link>
              <router-link to="/shows" class="nav-item" :class="{ active: $route.path === '/shows' }">演出</router-link>
            </div>
          </div>
          <div class="nav-right">
            <el-input placeholder="找影视剧、影人、影院" prefix-icon="el-icon-search" v-model="searchQuery"
              @keyup.enter.native="handleSearch" class="search-input" v-if="!isLoginPage">
            </el-input>
            <div class="download-app" v-if="!isLoginPage">
              <el-button type="text">
                <i class="el-icon-mobile-phone"></i>
                APP下载
              </el-button>
            </div>
            <el-button type="text" @click="handleLogin" v-if="!isLoggedIn" class="login-btn">
              <i class="el-icon-user"></i>
              登录
            </el-button>
            <el-dropdown v-else trigger="click">
              <span class="el-dropdown-link">
                <el-avatar size="small" src="@/assets/logo.svg"></el-avatar>
                <span class="username">{{ username }}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>我的订单</el-dropdown-item>
                <el-dropdown-item>优惠券</el-dropdown-item>
                <el-dropdown-item>消息中心</el-dropdown-item>
                <el-dropdown-item divided @click.native="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </nav>
      </div>
    </el-header>

    <el-main>
      <div class="main-content" :class="{ 'no-sidebar': isLoginPage }">
        <div class="content-left">
          <router-view />
        </div>
        <div class="content-right" v-if="!isLoginPage">
          <div class="sidebar-card">
            <h3 class="sidebar-title">
              正在热映
              <router-link to="/movies" class="more">全部 ></router-link>
            </h3>
            <div class="movie-list">
              <div class="movie-item" v-for="movie in hotMovies" :key="movie.id">
                <div class="poster">
                  <img :src="movie.poster" :alt="movie.title">
                </div>
                <div class="info">
                  <h4 class="title">{{ movie.title }}</h4>
                  <p class="score">观众评分 {{ movie.score }}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="sidebar-card">
            <h3 class="sidebar-title">
              即将上映
              <router-link to="/movies?tab=coming" class="more">全部 ></router-link>
            </h3>
            <div class="movie-list">
              <div class="movie-item" v-for="movie in comingMovies" :key="movie.id">
                <div class="poster">
                  <img :src="movie.poster" :alt="movie.title">
                </div>
                <div class="info">
                  <h4 class="title">{{ movie.title }}</h4>
                  <p class="release-date">{{ movie.releaseDate }}上映</p>
                  <p class="want">{{ movie.wantCount }}人想看</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>

    <el-footer height="60px" v-if="!isLoginPage">
      <div class="container">
        <div class="footer-content">
          <p>&copy; 2024 非凡影业平台 All Rights Reserved</p>
        </div>
      </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      searchQuery: '',
      isLoggedIn: false,
      username: '用户名',
      hotMovies: [
        {
          id: 1,
          poster: require('@/assets/images/奥本海默.jpg'),
          name: '奥本海默',
          rate: 9.3,
          director: '克里斯托弗·诺兰',
          stars: '基里安·墨菲,艾米莉·布朗特,马特·达蒙'
        },
        {
          id: 2,
          poster: require('@/assets/images/封神第一部.webp'),
          name: '封神第一部',
          rate: 8.7,
          director: '乌尔善',
          stars: '费翔,李雪健,黄渤'
        },
        {
          id: 3,
          poster: require('@/assets/images/流浪地球2.webp'),
          name: '流浪地球2',
          rate: 9.4,
          director: '郭帆',
          stars: '吴京,刘德华,李雪健'
        },
        {
          id: 4,
          poster: require('@/assets/images/蜘蛛侠-平行宇宙.webp'),
          name: '蜘蛛侠：平行宇宙',
          rate: 9.1,
          director: '鲍勃·佩尔西凯蒂',
          stars: '沙梅克·摩尔,海莉·斯坦菲尔德'
        },
        {
          id: 5,
          poster: require('@/assets/images/长安三万里.webp'),
          name: '长安三万里',
          rate: 9.0,
          director: '谢君伟,邹靖',
          stars: '杨天翔,凌振赫,吴俊全'
        }
      ],
      comingMovies: [
        {
          id: 7,
          poster: require('@/assets/images/满江红.webp'),
          name: '满江红',
          rate: 9.2,
          director: '张艺谋',
          stars: '沈腾,易烊千玺,张译'
        },
        {
          id: 8,
          poster: require('@/assets/images/阿凡达-水之道.webp'),
          name: '阿凡达：水之道',
          rate: 8.8,
          director: '詹姆斯·卡梅隆',
          stars: '萨姆·沃辛顿,佐伊·索尔达娜'
        },
        {
          id: 9,
          poster: require('@/assets/images/消失的她.webp'),
          name: '消失的她',
          rate: 7.9,
          director: '崔睿',
          stars: '朱一龙,倪妮,文咏珊'
        },
        {
          id: 10,
          poster: require('@/assets/images/八角笼中.jpg'),
          name: '八角笼中',
          rate: 8.3,
          director: '王宝强',
          stars: '王宝强,陈永胜,史彭元'
        }
      ]
    }
  },
  computed: {
    isLoginPage() {
      return this.$route.path === '/login'
    }
  },
  methods: {
    handleSearch() {
      console.log('Search:', this.searchQuery)
    },
    handleLogin() {
      if (!this.isLoggedIn) {
        this.$router.push('/login')
      }
    },
    handleLogout() {
      this.isLoggedIn = false
    }
  }
}
</script>

<style>
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-header {
  background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
}

.el-main {
  margin-top: 80px;
  flex: 1;
  background-color: #f5f7fa;
  padding-bottom: 60px;
}

.main-content {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
  padding: 0 20px;
}

.content-left {
  flex: 1;
  min-width: 0;
}

.content-right {
  width: 420px;
  flex-shrink: 0;
}

.sidebar-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.sidebar-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-title .more {
  font-size: 14px;
  color: #FF6B6B;
  text-decoration: none;
  font-weight: normal;
  transition: all 0.3s ease;
}

.sidebar-title .more:hover {
  color: #4ECDC4;
}

.movie-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.movie-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.movie-item .poster {
  width: 180px;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.movie-item:hover .poster {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.movie-item .poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movie-item .info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.movie-item .title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-item .score {
  font-size: 14px;
  color: #FF6B6B;
  margin: 0;
}

.movie-item .release-date {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.movie-item .want {
  font-size: 14px;
  background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.el-footer {
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
}

.nav {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: 40px;
  position: relative;
  padding: 5px;
}

.logo:hover .logo-img {
  transform: rotate(10deg) scale(1.1);
}

.logo-img {
  width: 45px;
  height: 45px;
  margin-right: 12px;
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.2));
}

.logo-text {
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 2px 2px 0 #FF6B6B,
    4px 4px 0 rgba(78, 205, 196, 0.5);
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.logo:hover .logo-text {
  transform: translateY(-2px);
  text-shadow: 2px 2px 0 #FF6B6B,
    6px 6px 0 rgba(78, 205, 196, 0.5);
}

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-item {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding: 0 20px;
  position: relative;
  transition: all 0.3s ease;
}

.nav-item:hover,
.nav-item.active {
  color: #ffffff;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -28px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

.nav-right {
  display: flex;
  align-items: center;
}

.search-input {
  width: 260px;
  margin-right: 20px;
}

.search-input .el-input__inner {
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  transition: all 0.3s ease;
}

.search-input .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.search-input .el-input__inner:focus {
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.download-app {
  margin-right: 20px;
}

.download-app .el-button,
.login-btn {
  color: #fff;
  font-size: 14px;
  transition: all 0.3s ease;
}

.download-app .el-button:hover,
.login-btn:hover {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}

.download-app i {
  margin-right: 4px;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  margin: 0 8px;
  color: #fff;
}

.footer-content {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.main-content.no-sidebar {
  padding: 0;
  max-width: none;
}

.main-content.no-sidebar .content-left {
  flex: 1;
}
</style>
